.left {
  // padding: 15px;
  overflow: hidden;
  .left-main-box {
    display: flex;
    background-color: #fff;
    flex-direction: column;
    border-radius: 16px;
    padding: 15px;
    h2 {
      margin-top: 40px;
      margin-bottom: 15px;
      color: salmon;
      text-align: center;
      font-size: 24px;
    }
    h5 {
      font-size: 17px;
      color: salmon;
      .count {
        // display: inline-block;
        color: #909399;
        padding: 0 5px;
        margin-bottom: 18px;
        font-size: 10px;
        font-weight: 500;
        border-radius: 3px;
        background-color: #f5f5f5;
      }
    }
    .child-chain-box {
      padding: 15px 20px 15px 20px;
      margin-bottom: 30px;
      .chain-ul {
        display: grid; //grid布局 二维布局
        .chain-li {
          height: 118px;
          .chain {
            display: inline-block;
            width: 100%;
            height: 100%;
            padding: 16px;
            background-color: pink;
            border-radius: 0 0 20px;
            .chain-name {
              font-size: 14px;
              color: #fff;
              font-weight: 600;
              border-bottom: 2px solid #fff;
            }
            .chain-txt-icon {
              height: 50px;
              width: 100%;
              margin-top: 16px;
              display: flex;
              justify-content: space-between;
              align-items: center;
              .chain-txt {
                flex: 1;
                color: #fff;
                font-size: 14px;
                margin-right: 10px;
                word-break: break-all; //实现在任意位置的换行
                //  多行溢出文字省略号显示
                display: -webkit-box;
                -webkit-line-clamp: 2;
                -webkit-box-orient: vertical;
                overflow: hidden;
                text-overflow: ellipsis;
              }
              .chain-icon {
                width: 40px;
                height: 40px;
                border-radius: 20px;
                overflow: hidden;
                background-color: salmon;
                img {
                  width: 100%;
                  height: 100%;
                }
              }
            }
          }
        }
      }
    }
    .left-foot {
      h5 {
        margin-bottom: 20px;
      }
      .application-method {
        position: relative;
        margin-left: 20px;
        padding-left: 10px;
        height: 120px;
        background: #1d72f320;
        color: #1d72f3;
        border-left: 5px solid #1d72f3;
        .application-icon {
          position: absolute;
          display: inline-block;
          top: -12px;
          left: -10px;
          width: 16px;
          height: 16px;
          text-align: center;
          line-height: 16px;
          color: #fff;
          border-radius: 15px;
          background-color: #1d72f3;
        }
        .method-ul {
          display: flex;
          flex-direction: column;
          padding: 10px 0;
          .method-li {
            height: 25px;
            line-height: 30px;
          }
          .method-li:nth-child(1) {
            font-weight: 600;
          }
        }
        &:hover {
          .application-icon {
            transform: rotate(360deg);
            transition: all 0.8s;
          }
        }
      }
      .application-case {
        margin-top: 15px;
        margin-left: 20px;
        padding-left: 10px;
        height: 120px;
        background: #1d72f320;
        color: #1d72f3;
        border-left: 5px solid #50bfff;
        .case-ul {
          display: flex;
          flex-direction: column;
          padding: 10px 0;
          .case-li {
            color: #606266;
            height: 25px;
            line-height: 30px;
            a {
              color: salmon;
              &:hover {
                border-bottom: 1px solid salmon;
              }
            }
          }
        }
      }
    }
  }
}

@media screen and (min-width: 841px) {
  .chain-ul {
    grid-template-columns: 1fr 1fr 1fr; // fr浮动宽度 是grid 的专用单位，这里表示 一行三个盒子，平均每个盒子占三分之一
    gap: 10px 10px; // 表示上下左右 10px 的间距
  }
}

@media screen and (min-width: 601px) and (max-width: 840px) {
  .chain-ul {
    grid-template-columns: 1fr 1fr; // fr浮动宽度 是grid 的专用单位，这里表示 一行三个盒子，平均每个盒子占三分之一
    gap: 10px 10px; // 表示上下左右 10px 的间距
  }
}

@media screen and (max-width: 600px) {
  .chain-ul {
    grid-template-columns: 1fr; // fr浮动宽度 是grid 的专用单位，这里表示 一行三个盒子，平均每个盒子占三分之一
    gap: 10px 10px; // 表示上下左右 10px 的间距
  }
}
